<template>
    <div class="all">
        <div class="header">
            <span class="x" @click="back">×</span>
            <div class="search">
                <span class="iconfont icon-fangdajing1">请输入城市名称</span>
            </div>     
        </div>


<van-tabs  sticky>
  <van-tab  title="国内城市" >
    <van-index-bar>
        <!-- <van-index-anchor index="#" />
        <van-index-anchor index="热" /> -->

        <van-index-anchor index="A" />
            <van-list>
                <van-cell v-for="item in listA" :key="item" :title="item" @click="catchadr"/>
            </van-list>
        <van-index-anchor index="B" />
            <van-list>
                <van-cell v-for="item in listB" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="C" />
            <van-list>
                <van-cell v-for="item in listC" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="D" />
            <van-list>
                <van-cell v-for="item in listD" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="E" />
            <van-list>
                <van-cell v-for="item in listE" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="F" />
            <van-list>
                <van-cell v-for="item in listF" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="G" />
            <van-list>
                <van-cell v-for="item in listG" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="H" />
            <van-list>
                <van-cell v-for="item in listH" :key="item" :title="item" />
            </van-list>
        <van-index-anchor index="Z" />
            <van-list>
                <van-cell v-for="item in listZ" :key="item" :title="item" />
            </van-list>
            
    </van-index-bar>
  </van-tab>

   <van-tab  title="海外城市">
        <van-index-bar :index-list="indexList">
            <!-- <van-index-anchor index="1">美国</van-index-anchor>
            <van-index-anchor index="1">澳大利亚</van-index-anchor>
            <van-index-anchor index="1">加拿大</van-index-anchor>
            <van-index-anchor index="1">日本</van-index-anchor>
            <van-index-anchor index="1">英国</van-index-anchor>
            <van-index-anchor index="1">泰国</van-index-anchor>
            <van-index-anchor index="1">德国</van-index-anchor>
            <van-index-anchor index="1">法国</van-index-anchor>
            <van-index-anchor index="1">新加坡</van-index-anchor>
            <van-index-anchor index="1">马来西亚</van-index-anchor> -->
            
            <van-cell v-for="item in listanchor" :key="item" :title="item" />      
        
        </van-index-bar>
   </van-tab>

</van-tabs>
         
</div>

</template>

<script>

import Vue from 'vue';
import { IndexBar, IndexAnchor,List,Cell } from 'vant';
Vue.use(Cell);
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(List);

import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);


import './tools/font_9qrw0jr1734/iconfont.css'
import axios from 'axios'
export default{
    // async created(){
    //     let result = await axios.get('/bj/loupan/pg2/?_t=1&source=index')
    //     console.log(result)
    //     console.log("wsw")
    // }
    data() {
                return {
                indexList: [],
                listA: ["安庆","鞍山","安康","安阳"],
                listB:["北京","北海","保定","宝鸡","包头","巴中","保山","亳州","本兮","滨州","保亭"],
                listC:["成都","重庆","长沙","长春","常德","常州","沧州","赤峰","池州","常熟","承德"],
                listD:["大连","东莞","丹东","达州","德阳","大同","东营","德州","定安","大理"],
                listE:["峨眉山市", "额尔古纳市", "鄂州市", "恩平市", "恩施市", "二连浩特市", "鄂尔多斯市"],
                listF:['防城港市', "肥城市", "汾阳市", "丰城市", "丰南市", "丰镇市", "凤城市", "奉化市", "佛山市", "福安市", "福鼎市", "福清市", "福泉市", "福州市", "抚顺市", "阜康市", "阜新市", "阜阳市", "富锦市", "富阳市"],
                listG:['盖州市', '赣州市', '高安市', '高啤店市', '高密市', '高平市', '高要市', "高邮市", "高州市", "藁城市", "格尔木市", "个旧市", "根河市", "公主岭市", "巩义市", "古交市", "广安市", "广汉市", "广水市", "广元市", "广州市", "贵池市", "贵港市", "贵溪市", "贵阳市", "桂林市", "桂平市"],
                listH: ["哈尔滨市", "哈密市", "海城市", "海口市", "海拉尔市", "海林市", "海伦市", "海门市", "海宁市", "海阳市", "邯郸市", "韩城市", "汉川市", "汉中市", "杭州市", "合川市", "合肥市", "合山市", "合作市", "和龙市", "和田市", "河池市", "河间市", "河津市", "河源市", "菏泽市", "贺州市", "鹤壁市", "鹤岗市", "鹤山市", "黑河市", "衡水市", "衡阳市", "洪湖市", "洪江市", "侯马市", "呼和浩特市", "湖州市", "葫芦岛市", "虎林市", "华阴市", "化州市", "怀化市", "淮安市", "淮北市", "淮南市", "淮阴市", "黄冈市", "黄骅市", "黄山市", "黄石市", "珲春市", "辉县市", "惠州市", "霍林格勒市", "霍州市"],
                listZ: ["枣阳市", "枣庄市", "增城市", "扎兰屯市", "湛江市", "张家港市", "张家界市", "张家口市", "张掖市", "章丘市", "漳平市", "漳州市", "樟树市", "招远市", "昭通市", "肇东市", "肇庆市", "镇江市", "郑州市", "枝江市", "中山市", "重庆市", "舟山市", "周口市", "株洲市", "珠海市", "诸城市", "诸暨市", "驻马店市", "庄河市", "涿州市", "资兴市", "资阳市", "淄博市", "自贡市", "邹城市", "遵化市", "遵义市"],
                listanchor:["美国","澳大利亚","加拿大","日本","英国","泰国","德国","法国","马来西亚"],
                loading: false,
                finished: false,
                };
            },
    methods: {
        catchadr(){
            console.log("wsw")
        },
        back(){
            console.log("wsw2")
        }
    },
  
}
</script>

<style lang='stylus' scoped>
.header
    padding 0.05rem 0.15rem
    display flex
    // position absolute
    // top 0
.x
    font-size 0.35rem
    margin-right 0.2rem
    color #666
.search
    height 0.35rem
    flex-grow 1
    margin-right 0.08rem
    margin-top 0.1rem
    border-radius 0.15rem
    background-color #F8F8F9
    border none
    padding 0.08rem 0.07rem 0 0.15rem
    color #aaa

.all
    height 100%
    overflow auto


</style>
